<template>
  <div>
    <a-card class="card" title="通过商品" :bordered="false">
      <a-form @submit="handleSubmit" :form="form" class="form">
        <a-row class="form-row" :gutter="16">
          <a-col :lg="3" :md="8" :sm="24">
            <a-form-item>
              <a-input v-decorator="[ 'skuId']" placeholder="商品ID 选填" />
            </a-form-item>
          </a-col>
          <a-col :lg="3" :md="8" :sm="24">
            <a-form-item>
              <a-input v-decorator="[ 'shopName']" placeholder="店铺名称 选填" />
            </a-form-item>
          </a-col>
          <a-col :lg="2" :md="8" :sm="24">
            <a-form-item>
              <a-button htmlType="submit" type="primary">查找商品</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-table
        :columns="columns"
        :rowKey="detailList => detailList.jdg_id"
        :dataSource="detailList"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <div slot="detailInfo" slot-scope="row">
          <div class="ant-list-item-meta">
            <div class="ant-list-item-meta-avatar">
              <span class="ant-avatar ant-avatar-lg ant-avatar-square ant-avatar-image">
                <img :src="'https://img14.360buyimg.com/n1/'+row.jdg_image_url" />
              </span>
            </div>
            <div class="ant-list-item-meta-content">
              <div class="ant-list-item-meta-description">
                <a target="_blank" :href="'//item.jd.com/'+row.jdg_sku_id+'.html'"><span class="detail-name">{{ row.jdg_sku_name }}</span></a>
                <span style="color:#000">￥{{ row.jdg_price }}</span>
                <span style="margin-left:20px">{{ row.jdg_shop_name }}</span>
              </div>
            </div>
          </div>
        </div>
        <div slot="coupon" slot-scope="row">
          <div v-if="row.jdg_send_num">
            ￥{{ row.jdg_coupon_amount }}
            <br />
            发量/总量：{{ row.jdg_now_count }}/{{ row.jdg_send_num }}
            <br />
            期限：{{ row.jdg_coupon_start_date }}-{{ row.jdg_coupon_end_date }}
          </div>
        </div>
        <div slot="time" slot-scope="row">{{ row.jdg_start_time }}<br>{{ row.jdg_end_time }}</div>
        <span slot="commissionRate" slot-scope="row">{{ row.jdg_commission_rate }}%</span>
        <span slot="serviceRate" slot-scope="row">{{ row.jdg_service_rate }}%</span>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { passDetail } from '@/api/detail'
const columns = [
  {
    title: '商品信息',
    width: 500,
    scopedSlots: { customRender: 'detailInfo' }
  },
  {
    title: '优惠券',
    scopedSlots: { customRender: 'coupon' }
  },
  {
    title: '参与时间',
    scopedSlots: { customRender: 'time' }
  },
  {
    title: '佣金比例',
    scopedSlots: { customRender: 'commissionRate' }
  },
  {
    title: '服务费比例',
    scopedSlots: { customRender: 'serviceRate' }
  }
]
export default {
  name: 'DetailList',
  data () {
    return {
      description: '显示你所有通过的商品列表.',
      value: 1,
      // form
      form: this.$form.createForm(this),
      columns,
      pagination: {},
      skeLoading: true,
      loading: false,
      detailList: [],
      values: {}
    }
  },
  created () {
    this.passDetail({ page: 1, pageSize: 15 })
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.passDetail(values)
          this.values = values
        }
      })
    },
    handleTableChange (pagination, filters, sorter) {
      const param = this.values
      param.pageSize = pagination.pageSize
      param.page = pagination.current
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager

      this.passDetail(this.values)
    },
    passDetail (parameter) {
      this.loading = true
      passDetail(parameter)
        .then(res => {
          this.skeLoading = false
          this.detailList = res.result.data
          const pagination = { ...this.pagination }
          pagination.total = res.result.total
          this.pagination = pagination
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style>
.detail-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 16px;
  margin-bottom: 5px;
}
</style>
